<template>
	<div>

		<div class="app-container">
			<TopInfo />

			<Search :lookup="data.lookup" @investigate="inves" />

			<el-button type="primary" size="small" @click="add">
				<template #default>
					<span class="text-sm">{{ $t('source.add') }}</span>
				</template>
			</el-button>

		</div>

		<div class="app-container" v-loading="data.mtloading">

			<el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }" height="700"
				:cell-style="{ 'text-align': 'center' }" class="w-full">

				<el-table-column prop="res_id" label="ID" />

				<el-table-column prop="title" :label="$t('source.name')" show-overflow-tooltip />

				<el-table-column prop="type" :label="$t('source.type')">
					<template #default="scope">
						<el-tag v-if="scope.row.type == 1">{{$t('public.picture')}}</el-tag>
						<el-tag v-if="scope.row.type == 2" type="warning">{{$t('source.video')}}</el-tag>
						<el-tag v-if="scope.row.type == 3" type="info">{{$t('source.audio')}}</el-tag>
					</template>
				</el-table-column>

				<el-table-column prop="pic" :label="$t('source.source')"> 
					<template #default="scope">
						<img v-if="scope.row.type == 1" class="w-20 h-20 inline-block" :src="scope.row.file_path || '--'" @click="setlookup(scope.row)" />
						<Video  @click="setlookup(scope.row)" v-if="scope.row.type == 2" class="w-24 h-32" :url="scope.row.file_path"/>
						<div @click="setlookup(scope.row)" v-if="scope.row.type == 3" class="">
							<el-tag type="info">{{$t('source.viewAudio')}}</el-tag>
						</div>
					</template>
				</el-table-column>

				<el-table-column prop="desc" :label="$t('source.desc')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.desc || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="length" :label="$t('source.dimensions')">
					<template #default="scope">
						{{ scope.row.width }} * {{ scope.row.length }}
					</template>
				</el-table-column>

				<el-table-column prop="size" :label="$t('source.materialSize')">
					<template #default="scope">
						{{ getFileSizeUnit(scope.row.size) }}
					</template>
				</el-table-column>

				<el-table-column prop="organization_name" :label="$t('source.Manage')">
					<template #default="scope">
						{{ scope.row.organization_name || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="status" :label="$t('source.auditStatus')">
					<template #default="scope">
						<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2"
							active-color="#13CE66" inactive-color="#fa5151" :loading="scope.row.btnstatus"
							@change="setstatus(scope.row)" />
					</template>
				</el-table-column>

				<el-table-column prop="creator_nickname" :label="$t('source.creater')">
					<template #default="scope">
						{{ scope.row.creator_nickname || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="status" :label="$t('source.status')" width="200">
					<template #default="scope">
						<el-button size="small" type="primary" @click="setupdate(scope.row)">
							{{$t('public.edit')}}
						</el-button>
						<el-button v-prmis="'resource_del'" size="small" type="danger" @click="setdelete(scope.row.res_id)">
							{{ $t('public.del')}}
						</el-button>
					</template>
				</el-table-column>
			</el-table>

			<PageNum :total="data.total" :page="data.source" @exposeData="current" @fraction="fraction" />

		</div>

		<el-dialog v-if="data.demonstrate" v-model="data.demonstrate" center :width="data.objcet.type == 1?dialog.width+'%':'30%'">
			
			<div v-if="data.objcet.type == 1" class="flex justify-center mb-4">
				<el-image :src="data.objcet.file_path" fit="fill" />
			</div>
			<div v-if="data.objcet.type == 2" class="flex justify-center">
				<Video class="max-w-82" :url="data.objcet.file_path"/>
			</div>
			<div v-if="data.objcet.type == 3" class="flex justify-center">
				<audio :src="data.objcet.file_path" controls controlsList="nodownload" />
			</div>
			<div class="pb-2 w-4 float-right cursor-pointer" v-if="data.objcet.type == 1" @click="onReduce">
				<img src="@/assets/reduce.png" :alt="$t('source.full')" :title="dialog.flng? $t('source.full'):$t('source.reduce')">
			</div>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n() 
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import Video from '@/components/Video/index.vue';
import { getresourceList, auditResresource, delresource } from '@/api/advment';
import { useRouter } from "vue-router";
import { getFileSizeUnit } from '@/utils';

const router = useRouter()

let data = reactive({
	mtloading: false, // 加载
	demonstrate: false, // 素材演示 弹窗
	lookup: [ // 筛选栏
		{ title: $t('source.name'), type: 'input', value: '', key: 'title' },
		{ title: $t('source.materialDesc'), type: 'input', value: '', key: 'desc' },
		{ title: $t('source.type'), type: 'define', select: [{ label: $t('public.picture'), value: 1 }, { label: $t('source.video'), value: 2 }, { label: $t('source.audio'), value: 3 }], value: '', key: 'type' },
		{ title: $t('source.auditStatus'), type: 'define', select: [{ label: $t('public.enable'), value: 1 }, { label: $t('public.prohibit'), value: 2 }], value: '', key: 'status' },
	],
	list: [], // 列表信息
	source: { // 筛选数据
		title: '',
		type: '',
		desc: '',
		status: '',
		page: 1,
		pageNum: 15
	},
	total: 0, // 总条数
})
let dialog = ref({
	width: 30,
	flng:true
})

let onReduce = ()=>{
	dialog.value.flng = !dialog.value.flng
	if(!dialog.value.flng){
		dialog.value.width = 90
	}else{
		dialog.value.width = 30
	}
}
// 获取列表信息
let getsource = () => {
	data.mtloading = true
	getresourceList(data.source).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			for (let item of res.data.data) {
				item.btnstatus = false
			}
			data.list = res.data.data
			data.total = res.data.total
		}
	})
}

// 查询回调
let inves = (e) => {
	for (let key in e) {
		data.source[key] = e[key]
	}
	data.source.page = 1
	data.source.pageNum = 15
	getsource()
}

// 审核素材
let setstatus = (e) => {
	e.btnstatus = true
	let obj = {
		res_id: e.res_id,
		status: e.status
	}
	auditResresource(obj).then(res => {
		e.btnstatus = false
		if (res.state == 200) {
			ElMessage({
				message: $t('message.operateSuccess'),
				type: 'success'
			})
			getsource()
		}
	})

}

// 查看素材
let setlookup = (e) => {
	dialog.value.flng =true
	dialog.value.width = 30
	data.demonstrate = true
	data.objcet = e
}

// 页数回调
let current = (e) => {
	data.source.page = e
	getsource()
}

// 条数回调
let fraction = (e) => {
	data.source.pageNum = e
	getsource()
}


// 修改素材
let setupdate = (e) => {
	let query = {
		l: encodeURI(JSON.stringify({
			info: e
		}))
	}
	router.push({ path: '/source/details_info', query: query })
}

// 删除素材
let setdelete = (e) => {
	ElMessageBox.confirm($t('message.delData'))
		.then(res => {
			delresource({ res_id: e }).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.delSuccess'),
						type: 'success'
					})
					data.demostatus = false
					getsource()
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			})
		}).catch(err => {
			console.log('取消')
		})
}

// 点击添加素材按钮
let add = () => {
	router.push({ path: '/source/add_info' })
}
getsource()

</script>
